import useIntlCustom from '@/hooks/useIntlCustom';
import { BellOutlined, SearchOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Card, Divider, Input, Progress, Select, Space, Table, Tabs, Tag } from 'antd';
import React from 'react';

const { Option } = Select;

/**
 * 主题演示页面
 * 展示各种组件在不同主题下的效果
 */
const ThemeDemo: React.FC = () => {
  const { translate } = useIntlCustom();
  // 示例数据
  const dataSource = [
    {
      key: '1',
      name: translate('collectorBench', 'dataName1'),
      age: 32,
      address: translate('collectorBench', 'dataAddress1'),
      status: 'active',
    },
    {
      key: '2',
      name: translate('collectorBench', 'dataName2'),
      age: 28,
      address: translate('collectorBench', 'dataAddress2'),
      status: 'inactive',
    },
    {
      key: '3',
      name: translate('collectorBench', 'dataName3'),
      age: 35,
      address: translate('collectorBench', 'dataAddress3'),
      status: 'active',
    },
  ];

  const columns = [
    {
      title: translate('collectorBench', 'columnName'),
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: translate('collectorBench', 'columnAge'),
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: translate('collectorBench', 'columnAddress'),
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: translate('collectorBench', 'columnStatus'),
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => (
        <Tag color={status === 'active' ? 'green' : 'red'}>
          {status === 'active'
            ? translate('collectorBench', 'statusActive')
            : translate('collectorBench', 'statusInactive')}
        </Tag>
      ),
    },
  ];

  return (
    <div style={{ minHeight: '100vh' }}>
      <Card
        title={`🎨 ${translate('collectorBench', 'title')}`}
        extra={<Button type="primary">{translate('collectorBench', 'actionButton')}</Button>}
      >
        <p>{translate('collectorBench', 'description')}</p>

        <Divider>{translate('collectorBench', 'buttonSection')}</Divider>
        <Space wrap>
          <Button size="large" type="primary">
            {translate('collectorBench', 'primaryButton')}
          </Button>
          <Button>{translate('collectorBench', 'defaultButton')}</Button>
          <Button type="dashed">{translate('collectorBench', 'dashedButton')}</Button>
          <Button type="text">{translate('collectorBench', 'textButton')}</Button>
          <Button type="link">{translate('collectorBench', 'linkButton')}</Button>
          <Button danger>{translate('collectorBench', 'dangerButton')}</Button>
        </Space>

        <Divider>{translate('collectorBench', 'inputSection')}</Divider>
        <Space direction="vertical" style={{ width: '100%' }}>
          <Input
            placeholder={translate('collectorBench', 'inputPlaceholder')}
            prefix={<UserOutlined />}
            style={{ maxWidth: 300 }}
          />
          <Select placeholder={translate('collectorBench', 'selectPlaceholder')} style={{ width: 200 }}>
            <Option value="option1">{translate('collectorBench', 'option1')}</Option>
            <Option value="option2">{translate('collectorBench', 'option2')}</Option>
            <Option value="option3">{translate('collectorBench', 'option3')}</Option>
          </Select>
          <Input.Search
            placeholder={translate('collectorBench', 'searchPlaceholder')}
            enterButton={<SearchOutlined />}
            style={{ maxWidth: 300 }}
          />
        </Space>

        <Divider>{translate('collectorBench', 'progressSection')}</Divider>
        <Space direction="vertical" style={{ width: '100%' }}>
          <Progress percent={30} />
          <Progress percent={50} status="active" />
          <Progress percent={70} status="exception" />
          <Progress percent={100} />
        </Space>

        <Divider>{translate('collectorBench', 'tagSection')}</Divider>
        <Space wrap>
          <Tag color="blue">{translate('collectorBench', 'blueTag')}</Tag>
          <Tag color="green">{translate('collectorBench', 'greenTag')}</Tag>
          <Tag color="orange">{translate('collectorBench', 'orangeTag')}</Tag>
          <Tag color="red">{translate('collectorBench', 'redTag')}</Tag>
          <Tag color="purple">{translate('collectorBench', 'purpleTag')}</Tag>
        </Space>
      </Card>

      <div style={{ marginTop: 24 }}>
        <Card title={`📊 ${translate('collectorBench', 'tableTitle')}`}>
          <Table dataSource={dataSource} columns={columns} pagination={false} size="middle" />
        </Card>
      </div>

      <div style={{ marginTop: 24 }}>
        <Card title={`📑 ${translate('collectorBench', 'tabsTitle')}`}>
          <Tabs
            defaultActiveKey="1"
            items={[
              {
                key: '1',
                label: (
                  <span>
                    <UserOutlined />
                    {translate('collectorBench', 'tabUser')}
                  </span>
                ),
                children: (
                  <>
                    <p>{translate('collectorBench', 'tabUserContent1')}</p>
                    <p>{translate('collectorBench', 'tabUserContent2')}</p>
                  </>
                ),
              },
              {
                key: '2',
                label: (
                  <span>
                    <SettingOutlined />
                    {translate('collectorBench', 'tabSetting')}
                  </span>
                ),
                children: (
                  <>
                    <p>{translate('collectorBench', 'tabSettingContent1')}</p>
                    <p>{translate('collectorBench', 'tabSettingContent2')}</p>
                  </>
                ),
              },
              {
                key: '3',
                label: (
                  <span>
                    <BellOutlined />
                    {translate('collectorBench', 'tabNotification')}
                  </span>
                ),
                children: (
                  <>
                    <p>{translate('collectorBench', 'tabNotificationContent1')}</p>
                    <p>{translate('collectorBench', 'tabNotificationContent2')}</p>
                  </>
                ),
              },
            ]}
          />
        </Card>
      </div>

      <div style={{ marginTop: 24 }}>
        <Card title={`🎯 ${translate('collectorBench', 'featuresTitle')}`}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '16px' }}>
            <Card size="small" title={`🌈 ${translate('collectorBench', 'featureColor')}`}>
              <p>{translate('collectorBench', 'featureColorDesc')}</p>
            </Card>
            <Card size="small" title={`✨ ${translate('collectorBench', 'featureTransition')}`}>
              <p>{translate('collectorBench', 'featureTransitionDesc')}</p>
            </Card>
            <Card size="small" title={`🚀 ${translate('collectorBench', 'featureModern')}`}>
              <p>{translate('collectorBench', 'featureModernDesc')}</p>
            </Card>
            <Card size="small" title={`📱 ${translate('collectorBench', 'featureResponsive')}`}>
              <p>{translate('collectorBench', 'featureResponsiveDesc')}</p>
            </Card>
          </div>
        </Card>
      </div>
    </div>
  );
};

export default ThemeDemo;
